$jetpack-product-card-color: var( --studio-wordpress-blue-30 );
$jetpack-product-card-circle-size: 65px;
$jetpack-product-card-icon-size: 55px;

.jetpack-product-card {
	position: relative;

	box-sizing: border-box;
	margin: calc( 24px + #{$jetpack-product-card-circle-size/2} ) 0 24px;

	background: var( --color-surface );
	border: 1px solid var( --color-border-subtle );
	border-left: none;
	border-right: none;

	// Top circle
	&::before {
		content: '';

		position: absolute;
		top: -$jetpack-product-card-circle-size/2;
		left: calc( 50% - #{$jetpack-product-card-circle-size/2} );

		display: block;
		box-sizing: border-box;
		width: $jetpack-product-card-circle-size;
		height: $jetpack-product-card-circle-size;

		background: inherit;
		border: 1px solid var( --color-border-subtle );
		border-radius: 50%;
	}

	// Mask for the bottom half of the circle
	&::after {
		content: '';

		position: absolute;
		top: 0;
		left: calc( 50% - #{$jetpack-product-card-circle-size/2} );

		display: block;
		width: $jetpack-product-card-circle-size;
		height: $jetpack-product-card-circle-size/2;

		background: inherit;
	}

	&:last-child {
		margin-bottom: 0;
	}

	.foldable-card {
		margin-bottom: 0;
	}

	@media ( min-width: 660px ) {
		border-left: 1px solid var( --color-border-subtle );
		border-right: 1px solid var( --color-border-subtle );

		&:not( .with-nudge ) .foldable-card {
			border-bottom-left-radius: 2px;
			border-bottom-right-radius: 2px;
		}

		.foldable-card--square-border {
			border-radius: 0;
		}
	}
}

.jetpack-product-card__header {
	position: relative;

	padding: 42px 16px 12px;

	border-bottom: solid 2px $jetpack-product-card-color;
}

.jetpack-product-card .product-icon {
	position: absolute;
	top: -$jetpack-product-card-icon-size/2;
	left: calc( 50% - #{$jetpack-product-card-icon-size/2} );
	z-index: 1;

	width: $jetpack-product-card-icon-size;
}

.jetpack-product-card__summary {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.jetpack-product-card__headings {
	flex: 1;
	margin-right: 16px;
}

.jetpack-product-card__product-name {
	margin-bottom: 6px;

	font-size: $font-title-medium;
	font-weight: 600;
	line-height: rem( 30px ) / $font-title-medium;
}

.jetpack-product-card__product-type {
	font-style: italic;
	font-weight: 400;
}

.jetpack-product-card__subheadline {
	margin-bottom: 24px;

	color: var( --color-neutral-50 );

	font-size: $font-body-extra-small;
	line-height: rem( 16px ) / $font-body-extra-small;

	@media ( min-width: 660px ) {
		font-size: $font-body-small;
	}
}

.jetpack-product-card__price {
	margin: -4px 0 20px;

	&.is-left-aligned .jetpack-product-card__raw-price {
		justify-content: flex-start;
	}
}

.jetpack-product-card__from,
.jetpack-product-card__billing-time-frame,
.jetpack-product-card__expiration-date {
	display: block;

	color: var( --color-text-subtle );

	font-size: $font-body-extra-small;
	font-style: italic;
	line-height: 1;
}

.jetpack-product-card__expiration-date {
	margin-top: 10px;

	color: var( --studio-pink-50 );

	text-align: right;
}

.jetpack-product-card__from {
	margin: 0 8px 8px 0;
}

.jetpack-product-card__raw-price {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	margin-bottom: 4px;

	:last-child {
		margin-right: 0;
	}
}

.jetpack-product-card .plan-price {
	border-color: $jetpack-product-card-color;

	&.is-original::before {
		// Enable the overwrite of the border color by setting it to .plan-price
		border-color: inherit;
	}

	&.is-discounted {
		color: var( --color-text );

		.plan-price__currency-symbol {
			color: inherit;
		}
	}
}

.jetpack-product-card .plan-price__integer {
	font-weight: 600;
}

.jetpack-product-card__badge {
	$jetpack-product-card-badge-height: 24px;

	position: absolute;
	left: 16px;
	bottom: -$jetpack-product-card-badge-height/2;

	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	height: $jetpack-product-card-badge-height;
	padding: 0 16px;

	background: var( --color-neutral-40 );
	border-radius: 2px;
	color: var( --color-text-inverted );

	font-size: 0.75rem;
	line-height: $jetpack-product-card-badge-height;
	text-transform: uppercase;
}

.jetpack-product-card__body {
	padding: 36px 16px 0;
}

.jetpack-product-card__discount-message {
	margin: -20px 0 16px;

	color: var( --color-success-40 );

	font-style: italic;
}

.jetpack-product-card .button {
	width: 100%;
	margin-bottom: 20px;
}

.jetpack-product-card__description {
	margin-bottom: 42px;
	padding: 0 4px;
}

.jetpack-product-card__children {
	margin-top: -16px;
	margin-bottom: 24px;
}

.jetpack-product-card .foldable-card.card.is-expanded {
	margin-bottom: 0;
}

.jetpack-product-card__features-category {
	margin: 8px 0 12px;
	padding-bottom: 6px;

	border-bottom: solid 1px var( --color-border-subtle );
	color: var( --studio-gray-70 );

	font-weight: 600;
}

.jetpack-product-card__features-list {
	margin: 0;

	list-style-type: none;
}

.jetpack-product-card__features-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
}

.jetpack-product-card__features-subitems {
	margin-left: 36px;

	list-style-type: none;
}

.jetpack-product-card__features-summary {
	display: flex;
	align-items: flex-start;
}

.jetpack-product-card__features-text {
	flex: 1;
	margin: 0 16px 0 0;
}

.jetpack-product-card__features-icon {
	margin-right: 14px;

	fill: var( --studio-gray-50 );

	&.gridicons-checkmark {
		fill: var( --color-primary-50 );
	}
}

.jetpack-product-card__feature-more {
	margin-top: 24px;
	padding-top: 16px;

	border-top: solid 1px var( --color-border-subtle );
}

/**
 * Upgrade Nudge styles
 */
.jetpack-product-card__nudge {
	margin: 16px;
	padding: 24px 16px 8px;

	background-color: var( --studio-purple-0 );
	border-radius: 5px;
}

.jetpack-product-card__nudge-heading {
	margin-right: 16px;

	font-weight: 700;
}

.jetpack-product-card__nudge-product-type {
	font-size: $font-title-small;
	line-height: rem( 30px ) / $font-title-small;
}

.jetpack-product-card__nudge-features {
	margin: 24px 0 32px;
}

.jetpack-product-card__nudge-feature {
	display: flex;

	margin-bottom: 16px;

	&:last-of-type {
		margin-bottom: 0;
	}

	.gridicon {
		fill: var( --studio-pink-50 );

		min-width: 24px;
	}
}

.jetpack-product-card__nudge-feature-desc {
	margin-left: 16px;
}

.jetpack-product-card__nudge-description {
	margin: 24px 0;
}

.jetpack-product-card__nudge-button.button {
	margin-bottom: 0;
}

.jetpack-product-card__nudge-button--cancel {
	font-weight: 400;
	text-decoration: underline;
}

/* Prices Loading state */
.jetpack-product-card__price-placeholder {
	@include placeholder( --color-neutral-10 );

	width: 100px;
	min-height: 36px;
	margin-left: 45px;
	margin-bottom: 4px;
}

.jetpack-product-card__time-frame-placeholder {
	@include placeholder( --color-neutral-10 );

	width: 100px;
	height: 12px;
	margin-left: 45px;
}
